<template>
  <div class="tabBarItem">
      <div @click="itemClick">
      <div v-if='!isActive' ><slot name="img"></slot></div>
      <div v-else><slot name="activeImg"></slot></div>
      </div>
      <div :class="{'red':isActive}"><slot name="text"></slot></div>
  </div>
</template>

<script>
export default {
    name:'tabBarItem',
    props:['path','isActive'],
    
    methods:{
        itemClick(){
            this.$emit('itemClick',this.path)
        }
    }
}
</script>

<style scoped>
.red{
    color:rgb(224, 1, 38)
}
</style>